  // path是nodejs自带的 路径管理模块
  // path.resolve 加载路径
  // __dirname 当前文件夹路径
  
  let path=require("path");
 let HtmlWebpackPlugin=require("html-webpack-plugin")
module.exports={
  // 1 打包入口的文件
    entry:"./main.js",
    //2 打包出口文件
    output: {
      path: path.resolve(__dirname, 'dist'), //文件夹名
      filename: 'bundle.js',//文件名称
    },
    // 3.loader的配置 由于webpack只识别js文件
    // 但是最终webpack需要打包所有文件，如css,less,sass,img等
    // 所以需要在webpack的module:{} 配置很多loader
    // loader 有很多中 如 vue-loader --让webapck识别.vue结尾的文件
    //
    // 想使用less ，安装配置 less-loader  使用sass 安装sass-loader 
    // webpack不识别css  css-loader style-loader 
    //  bable-loader 将es6转es5的loader
    //  css-loader 和style-loader 来让webpack能打包css
    // ---------------------------------------npm run build打包
    // npm install --save-dev style-loader css-loader
    module: {
      rules: [
         {
                //loader的配置
                test:/\.css$/i,//正侧找到css后缀文件
                //依赖配置,执行顺序,从后到前,先执行css-loader在执行style-loader
                use:[
                    "style-loader", //将js中的css通过创建style标签添加到html中
                    "css-loader"    //将css样式编译成commentjs的模块到js中
                ] 
            }

      ],
    },

    // 打包模式  production生产模式   development 开发模式
    // 生产模式 上线使用的代码 全部都合并压缩
    // 开发模式 基本打包
   mode:"production",
  //  插件
   plugins: [
    // 生成主页插件
    new HtmlWebpackPlugin({
        template: 'src/index.html', // 使用的 HTML 模板文件
        filename: 'index.html', // 生成的 HTML 文件名称
       })
  ]

}